<template>
  <div class="back2">
    <div class="back1">
      <div class="login">
        <h1 class="letter">Login</h1>
        <input class="shuru" v-model="email" type="email" placeholder="E-mail" />
        <input class="shuru" v-model="password" type="password" placeholder="Password" />
        <button class="DengLu" @click="send">login</button>
        <button class="ZhuCe" @click="jump">Register>></button>
      </div>
    </div>
  </div>
</template>
<script>
import { Login, QueryUserInfo } from '../request'
export default {
  name: "UserLogin",
  components: {

  },
  data () {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    send () {
      let that = this
      console.log('deng lu nie')
      this.$message.info('登录中')

      Login({
        "username": that.email,
        "password": that.password
      }).then(res => {
        localStorage.setItem('token', res.data.token);
        
        QueryUserInfo(that.email).then(res=>{
          localStorage.setItem('profile', JSON.stringify(res.data))
          this.$message.success('登录成功, 跳转中')
          this.$router.push("/home")
        }).catch(error=>{
          this.$message.error('出错啦: ' + error.response.data.msg)
        })
      }).catch(error => {
        this.$message.error('出错啦: ' + error.response.data.msg)
      })
    },
    jump(){
      this.$router.push("/reg")
    }
  }
}
</script>
<style scoped>
.back1 {
  background-image: url("../assets/login-bg.jpg");
  width: 973px;
  height: 556px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background-position: center;
  background-size: cover;
  top: 50%;
  transform: translateY(-50%);
  box-shadow: 10px 10px 5px rgba(100, 100, 100, .5);
}
.back2 {
  background: linear-gradient(
    180deg,
    rgb(151, 113, 131) 30%,
    80%,
    rgb(255, 233, 233) 30%
  );
  position: relative;
  width: 100vw;
  height: 100vh;
}
.login {
  background-color: rgba(255, 255, 255, 0.5);
  width: 250px;
  height: 400px;
  position: relative;
  float: right;
  margin: 75px;
}
.letter {
  color: rgb(44, 44, 44);

  margin: 25px 0 100px 0;
  text-indent: 1.5em;
  letter-spacing: 0.2em;
  font-weight: normal;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
}
.shuru {
  background-color: rgba(255, 255, 255, 0);
  border-width: 0 0 1px 0;
  outline: none;
  position: relative;
  margin: 30px auto;
  display: block;
}
.DengLu {
  color: beige;
  padding: 5px;
  margin: 20px auto;
  background: linear-gradient(
    45deg,
    rgb(255, 170, 113),
    rgb(199, 208, 218),
    rgb(124, 177, 255)
  );
  display: block;
  outline: none;
  border: 0;
  font-weight: 700;
  cursor: pointer;
  width: 160px;
}
.ZhuCe {
  color: rgb(87, 3, 3);
  padding: 2.5px 20px;
  margin: 20px auto;
  background-color: rgb(92, 230, 255);
  display: block;
  outline: none;
  border: 0;
  font-weight: 700;
  position: relative;
  float: right;
  transform: translateX(15px);
  cursor: pointer;
}
</style>